<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/css.html'}}
</head>

<body>
    
    {{include './common/header.html'}}
    
    <!-- 首屏大图 -->
    <section class="hero-section" style="background-image: url('{{static_url}}/img/banner.jpg');">
        <div class="container mx-auto px-4 relative z-10 text-white">
            <div class="text-center">
                <h1 class="text-6xl font-bold mb-6">诚信服务 互利共赢</h1>
            </div>
        </div>
    </section>

    <!-- 业务分类 -->
    <section class="py-10">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">业务范围</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="card p-6 text-center">
                    <img  src="{{static_url}}/img/29.jpg" alt="钢材贸易" class="w-full h-48 object-cover mb-4 rounded">
                    <h3 class="text-xl font-semibold mb-2">钢材贸易</h3>
                    <p class="text-gray-600">提供优质钢材产品，满足各类工业需求</p>
                </div>
                <div class="card p-6 text-center">
                    <img  src="{{static_url}}/img/30.jpg" alt="摩托车配件" class="w-full h-48 object-cover mb-4 rounded">
                    <h3 class="text-xl font-semibold mb-2">摩托车配件</h3>
                    <p class="text-gray-600">专业的摩托车零配件供应服务</p>
                </div>
                <div class="card p-6 text-center">
                    <img  src="{{static_url}}/img/31.png" alt="机械设备" class="w-full h-48 object-cover mb-4 rounded">
                    <h3 class="text-xl font-semibold mb-2">机械设备</h3>
                    <p class="text-gray-600">先进的机械设备解决方案</p>
                </div>
                <div class="card p-6 text-center">
                    <img  src="{{static_url}}/img/32.jpg" alt="环保设备" class="w-full h-48 object-cover mb-4 rounded">
                    <h3 class="text-xl font-semibold mb-2">环保设备</h3>
                    <p class="text-gray-600">环保节能设备一站式服务</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品展示 -->
    <section class="py-10 bg-light-gray">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">热门产品</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="card bg-white">
                    <img  src="{{static_url}}/img/01.png" alt="碳钢圆钢" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">碳钢圆钢</h3>
                        <p class="text-gray-600">高品质碳钢材料，适用于各类机械制造</p>
                    </div>
                </div>
                <div class="card bg-white">
                    <img  src="{{static_url}}/img/20.png" alt="数控机床" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">数控机床</h3>
                        <p class="text-gray-600">精密加工设备，提高生产效率</p>
                    </div>
                </div>
                <div class="card bg-white">
                    <img  src="{{static_url}}/img/09.png" alt="双开口扳手" class="w-full h-64 object-cover">
                    <div class="p-6">
                        <h3 class="text-xl font-semibold mb-2">双开口扳手</h3>
                        <p class="text-gray-600">专业五金工具，品质保证</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 公司简介、新闻动态与联系方式 -->
    <section class="py-10 bg-light-gray">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold text-center mb-12">新闻动态 </h2>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                {{if news}}
                    {{each news}}
                    <div class="card p-6">
                        <h3 class="text-xl font-semibold mb-2">{{$value.title}}</h3>
                        <p class="text-gray-600 mb-3">{{$value.description}}...</p>
                        <div class="flex justify-between items-center">
                            <span class="text-gray-500">
                                <i class="far fa-calendar-alt mr-2"></i>
                                {{ dateFormat($value.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
                            </span>
                            <a href="{{$value.path}}/article-{{$value.id}}.html" class="text-blue-600 hover:text-blue-800">查看详情</a>
                        </div>
                    </div>
                    {{/each}}
                {{/if}}
            </div>

            <p class="text-gray-600 text-center mb-3 mt-10">
                <a href="/news/index.html"
                    class="text-blue-600 font-semibold hover:text-blue-800">
                    阅读更多 <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </p>
        </div>
    </section>



    <!-- 联系方式 -->
    <section class="py-10">
        <div class="container mx-auto px-4">
            <div class="card bg-white p-6">
                <h3 class="text-xl font-semibold mb-6">联系方式</h3>
                <div class="space-y-4">
                    <p><i class="fas fa-phone-alt mr-2"></i> 电话：{{frag.CompanyTel}}</p>
                    <p><i class="fas fa-envelope mr-2"></i> 邮箱：{{frag.CompanyEmail}}</p>
                    <p><i class="fas fa-map-marker-alt mr-2"></i> 地址：{{frag.OfficeAddress}}</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    {{include './common/footer.html'}}
    {{include './common/js.html'}}

    
</body>

</html>
